<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Double Y Axis Bubble Chart</title>
    <!-- 引入 ECharts -->
    
  </head>
  <body>
    <script src="./echarts.min.js"></script>
    <!-- 创建一个容器用于渲染图表 -->
    <div id="chart" style="width: 600px; height: 500px"></div>

    <script>
      // 初始化 ECharts 实例
      const myChart = echarts.init(document.getElementById("chart"));

      // 数据
      const dataNetworkStrength = [
        [44056, 3, 23968973, "Australia"],
        [43294, 4, 35939927, "Canada"],
        [13334, 20, 1376048943, "China"],
        [21291, 8, 11389562, "Cuba"],
        [38923, 5, 5503457, "Finland"],
        [37599, 7, 64395345, "France"],
        [44053, 6, 80688545, "Germany"],
        [42182, 2, 329425, "Iceland"],
        [5903, 25, 1311050527, "India"],
        [36162, 10, 126573481, "Japan"],
        [1390, 50, 25155317, "North Korea"],
        [34644, 9, 50293439, "South Korea"],
        [34186, 4, 4528526, "New Zealand"],
        [64304, 5, 5210967, "Norway"],
        [24787, 15, 38611794, "Poland"],
        [23038, 18, 143456918, "Russia"],
        [19360, 12, 78665830, "Turkey"],
        [38225, 6, 64715810, "United Kingdom"],
        [53354, 4, 321773631, "United States"],
      ];
      const dataOfflineTimes = [
        [44056, 2, 23968973, "Australia"],
        [43294, 1, 35939927, "Canada"],
        [13334, 4, 1376048943, "China"],
        [21291, 3, 11389562, "Cuba"],
        [38923, 0.5, 5503457, "Finland"],
        [37599, 1, 64395345, "France"],
        [44053, 2, 80688545, "Germany"],
        [42182, 1, 329425, "Iceland"],
        [5903, 5, 1311050527, "India"],
        [36162, 3, 126573481, "Japan"],
        [1390, 6, 25155317, "North Korea"],
        [34644, 2, 50293439, "South Korea"],
        [34186, 0.8, 4528526, "New Zealand"],
        [64304, 1, 5210967, "Norway"],
        [24787, 2.5, 38611794, "Poland"],
        [23038, 3.2, 143456918, "Russia"],
        [19360, 2.1, 78665830, "Turkey"],
        [38225, 1.5, 64715810, "United Kingdom"],
        [53354, 1, 321773631, "United States"],
      ];
      const colorList = ['#378eff', '#F5DE8D', '#ffb300', '#ff4646'];
      const legendList=["当日设备网络强度", "当日设备离线次数"]

      // 配置项
      const option = {
        title: {
          text: "",
        },
        tooltip: {
          formatter: function (params) {
            return (
              params.data[3] +
              "<br/>" +
              "GDP per Capita: " +
              params.data[0] +
              "<br/>" +
              "Value: " +
              params.data[1] +
              "<br/>" +
              "Population: " +
              params.data[2]
            );
          },
        },
        legend: {
          data: legendList,
        },
        xAxis: {
          show: false,
        },
        yAxis: [
          {
            type: "value",
            name: "设备网络强度分布情况",
            nameLocation: 'center',
            nameTextStyle:{
               color:"#000",
            },
            nameRotate:-90,
            nameGap: 40,
            position: "left",
            interval: 20,
            max:40,
            boundaryGap: false, // 将boundaryGap设置为false
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
              },
            },
            axisLabel: {
              formatter: function (value) {
                console.log(value);
                if (value <= 6 && value >= 0) return "0 | 6";
                else if (value <= 20 && value > 6) return "7 | 20";
                else {
                  return "20以上";
                }
              },
              rotate: 90, // 文字竖向排列
              color: '#000' // 设置 y 轴颜色为红色
            },
            axisLine: {
                        lineStyle: {
                            color: '#fff' // 设置 y 轴颜色为红色
                        }
                    }
          },
          {
            type: "value",
            name: "设备离线分布情况",
            nameLocation: "middle",
            nameGap: 40,
            nameRotate:-90,
            nameTextStyle:{
               color:"#000",
            },
            position: "right",
            min: 0,
            max: 6,
            interval: 3,
            boundaryGap: false, // 将boundaryGap设置为false
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
              },
              color:"#000"
            },
            axisLabel: {
              formatter: function (value) {
                if (value <= 1 && value >= 0) return "0 | 1";
                else if (value <= 4 && value > 1) return "2 | 4";
                else {
                  return "4以上";
                }
              },
              rotate: 90, // 文字竖向排列
              color:"#000",
              position: 'inside' // 将 axisLabel 放置在刻度之间
            },
            axisLine: {
            lineStyle: {
              color: '#fff' // 设置 y 轴颜色为红色
            }
          }
        
          },
        ],
        series: [
          {
            name: "当日设备网络强度",
            type: "scatter",
            data: dataNetworkStrength,
            symbolSize: function (data) {
              return Math.sqrt(data[2]) / 5e2;
            },
            itemStyle: {
            normal: {
                shadowBlur: 0,
                shadowOffsetY: 0,
                color: new echarts.graphic.RadialGradient(0.5, 0.2, 0.5, [
                    {
                        offset: 0,
                        color: '#fff',
                    },
                    {
                        offset: 1,
                        color: colorList[0],
                    },
                ]),
            },
        },
            emphasis: {
              focus: "series",
              label: {
                show: true,
                formatter: function (param) {
                  return param.data[3];
                },
                position: "top",
              },
            },
          },
          {
            name: "当日设备离线次数",
            type: "scatter",
            data: dataOfflineTimes,
            symbolSize: function (data) {
              return Math.sqrt(data[2]) / 5e2;
            },
            itemStyle: {
            normal: {
                shadowBlur: 0,
                shadowOffsetY: 0,
                color: new echarts.graphic.RadialGradient(0.5, 0.2, 0.5, [
                    {
                        offset: 0,
                        color: '#fff',
                    },
                    {
                        offset: 1,
                        color: colorList[1],
                    },
                ]),
            },
        },
            yAxisIndex: 1,
            emphasis: {
              focus: "series",
              
              label: {
                show: true,
                formatter: function (param) {
                  return param.data[3];
                },
                position: "top",
              },
            },
          },
        ],
      };

      // 使用配置项展示图表
      myChart.setOption(option);
    </script>
  </body>
</html>
